<template>
	<view class="bizPage">
		<status-bar title="新闻列表" />
		<view class="padding20">
			<view class="search bgwhite d-flex a-center m-bot20">
				<text class="iconfont icon-sousuo color-333 m-right30"></text>
				<input class="flex-1 size26" v-model="keywords" placeholder="搜索新闻内容" confirm-type="search" @blur="handleSearch" />
			</view>
			<view class="list bgwhite p-bot20" v-if="pageData.length">
				<view class="item d-flex" @click="toUrl('/bizPage/news/details?id=' + item.id)" v-for="(item,index) in pageData" :key="index">
					<view class="flex-1 d-flex f-column j-sb m-right30">
						<view class="size28 color-333 bold line40 ellipsis_2">{{ item.title }}</view>
						<view class="d-flex color-999">
							<view class="d-flex a-center" style="width: 30%;">
								<text class="iconfont icon-liulan size36 m-right10"></text>
								<text class="size24">{{ item.views }}</text>
							</view>
							<view class="d-flex a-center">
								<text class="iconfont icon-shijian size36 m-right10"></text>
								<text class="size24">{{ item.publishTime }}</text>
							</view>
						</view>
					</view>
					<image class="img" :src="imgUrls(item.cover)" mode="aspectFill"></image>
				</view>
			</view>
			
			<up-empty :show="noData" mode="news" marginTop="100"></up-empty>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { toUrl, Toast, imgUrls } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	const pageData = ref([])
	const page = ref(1)
	const limit = ref(10)
	const noData = ref(false)
	const noMore = ref(false)
	const keywords = ref('')
	
	onLoad(() => {
		getList()
	})
	
	const getList = () => {
		noData.value = false
		noMore.value = false
		Http.get({
			url: '/hr/getArticleList',
			data: {
				page: page.value,
				limit: limit.value,
				keywords: keywords.value
			}
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.data.list || []
			pageData.value = page.value == 1 ? result : pageData.value.concat(result)
			if(!pageData.value.length) noData.value = true
			if(result.length < limit.value) noMore.value = true
		})
	}
	
	const handleSearch = () => {
		page.value = 1
		getList()
	}
	
	onReachBottom(() => {
		if(noMore.value) return
		page.value ++
		getList()
	})
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #F6F7FB;
	}
	.search {
		height: 70rpx;
		box-shadow: 0rpx 3rpx 4rpx 0rpx rgba(58,100,132,0.11);
		border-radius: 35rpx;
		padding: 0 30rpx;
	}
	.list {
		box-shadow: 0rpx 2rpx 3rpx 0rpx rgba(0,0,0,0.09);
		border-radius: 7rpx;
		.item {
			height: 206rpx;
			border-bottom: 1rpx solid #F5F5F5;
			padding: 20rpx 0;
			margin: 0 20rpx;
			.img {
				width: 218rpx;
				height: 166rpx;
			}
		}
	}
</style>
